<!--  -->
<template>
  <div style="height:650px;overflow: hidden auto;
  border-bottom-right-radius: 25px;  border-bottom-left-radius: 25px;">
    <div ref="top" class="top">

    </div>
    <div v-if="mode === 'v1'">
      <div v-if="!list.card">
        <div v-if="list" class="bg-white" style="padding-top: 10px">
          <div class="text-center">
            {{ title }}
          </div>
          <div v-for="item in list.mdata" :key="item" class="float-left" :class="item.grid">

            <div v-if="item.key === '文本'" class="p-2  m-2" :class="item.center" :style="item.css">
              <div v-html="item.value"></div>
              <!-- {{ item.value }} -->
            </div>
            <div v-else-if="item.key === '图片'" class="" :style="item.css">
              <img :src="item.value" :class="item.mode === 'aspectFill' ? 'aspect-fit' : 'width-fix'"
                style="margin: 0 auto;margin-top: 15px;" />

            </div>
            <div v-else-if="item.key === '滚动'" class="p-2  m-2" :style="item.css">
              <div style="display:none;word-wrap: break-word">{{ item.value }}</div>
              <el-carousel :autoplay="false" track-by="img" height="80px" :key="new Date().getTime()">
                <el-carousel-item v-for="img in item.value" :key="img">

                  <img :src="img" alt="" style="width:auto;height:80px;margin:0 auto" />
                </el-carousel-item>
              </el-carousel>
            </div>
            <div v-else-if="item.key === '视频'" class="p-2  m-2" :style="item.css">
              <video :src="item.value" class="w-full"
                :class="item.mode === 'aspect-16/9' ? 'aspect-16-9' : 'aspect-9-16'" controls></video>
            </div>
            <div v-else-if="item.key === '音频'" class="p-2  m-2" :style="item.css">
              <audio :src="item.value" mode="widthFix" controls
                style="width: 100%;height: auto;margin: 0 auto;"></audio>
            </div>
            <div v-else-if="item.key === '标题'" class="p-2  m-2" :style="item.css">
              <div :class="`title  title${item.index}`" :data-text="item.value">
                {{ item.value }}
              </div>
            </div>
            <div v-else-if="item.key === '分割线'" class="p-2  m-2" :style="item.css">
              <hr :class="`${item.value}`" />
            </div>

            <div v-else-if="item.key === '文件'" class="p-2 border-2 m-2" style="height: 120px;" :style="item.css">

              <el-row custom-style="margin-bottom: 10px">
                <el-col span="4">
                  <div class="p-4">
                    <img :src="getSettingbyKey('文档图标')" style="width:80px;height:80px;" mode="scaleToFill" />
                  </div>
                </el-col>
                <el-col span="8">
                  <div class="mt-4 w-30" style="word-break:break-all;word-wrap:break-word; "> {{ item.name }}</div>
                  <div class="mt-4 font-100  text-left p-2 w-30 text-gray">
                    {{ item.size }}
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="h-2" style="clear: both;"></div>

          <div v-for="(item, index) in list.fdata" :key="item" class="mt-2 m-2 relative">
            <div v-if="item.item.title !== '分组标题'" class="p-2">
              {{ item.item.name }} <text v-if="containsRequired(item.item.setting, '必填')" class="text-red">
                *
              </text>
            </div>
            <div v-if="item.item.instruction && item.item.title !== '分组标题'" class="p-2 text-sm text-gray-400"
              :style="item.css">
              {{ item.item.instruction }}
            </div>
            <div v-if="item.item.title === '单行文本'" class="p-2">
              <el-input v-model="item.item.value" placeholder="请输入内容" border></el-input>
            </div>
            <div v-else-if="item.item.title === '多行文本'" class="p-2">
              <!-- <uv-textarea v-model="item.item.value" placeholder="请输入内容"></uv-textarea> -->
              <el-input v-model="item.item.value" style="width: 260px" :rows="4" type="textarea" placeholder="请输入内容" />
            </div>
            <div v-else-if="item.item.title === '数字'" class="p-2">
              <!-- <uv-input v-model="item.item.value" type="number" placeholder="请输入数字" border="surround">
            <template v-if="item.item.unit" #suffix>
              <uv-button>
                {{ item.item.unit }}
              </uv-button>
            </template>
</uv-input> -->
              <el-input style="width: 260px;" placeholder="请输入数字">
                <template #append>
                  {{ item.item.unit }}
                </template>
              </el-input>
            </div>
            <div v-else-if="item.item.title === '日期'" class="p-2">
              <el-input v-model="item.item.value" style="width: 260px;border:0" placeholder="请选择日期" />
              <!-- <uv-input v-model="item.item.value" type="text" readonly placeholder="请选择日期" border="surround">
            <template #suffix>
              <uv-button :text="tips" type="warning" size="mini" @click="opencalendars(index)">
                选取
              </uv-button>
            </template>
          </uv-input>
          <uv-calendars :ref="`calendars${index}`" @confirm="confirmcalendars" /> -->
            </div>
            <div v-else-if="item.item.title === '时间'" class="p-2">
              <el-input v-model="item.item.value" style="width: 260px;border:0" placeholder="请选择时间" />
              <!-- <uv-input v-model="item.item.value" type="text" readonly placeholder="请选择时间" border="surround">
            <template #suffix>
              <uv-button :text="tips" type="warning" size="mini" @click="opendatetimePicker(index)">
                选取
              </uv-button>
            </template>
          </uv-input> -->
              <!-- <uv-datetime-picker :ref="`datetimePicker${index}`" v-model="value" mode="time"
            @confirm="confirmdatetimePicker">
          </uv-datetime-picker> -->
            </div>
            <div v-else-if="item.item.title === '分组标题'" class="p-2 text-center">
              <div class="text-left font-8 pb-2"
                style="font-size: 20px;font-weight: 800;border-bottom:2px #fcca00 solid">
                {{ item.item.name }}
              </div>
              <div class="text-left font-8">
                {{ item.item.instruction }}
              </div>
            </div>
            <div v-else-if="item.item.title === '单选项'" class="p-2" style="clear: both;">
              <div style="clear: both;"></div>
              <el-radio-group v-model="item.item.value">
                <view v-for="o in item.item.radiolist" :key="o">
                  <el-radio :name="o.name" :label="o.name" :value="o.isActive"></el-radio>
                </view>

              </el-radio-group>
            </div>
            <div v-else-if="item.item.title === '多选项'" class="p-2" style="clear: both;">
              <el-checkbox-group v-model="item.item.value" placement="column">
                <el-checkbox v-for="o in item.item.checkboxlist" :key="o" :name="o.name" :label="o.name"
                  :value="o.isActive"></el-checkbox>
              </el-checkbox-group>
            </div>
            <div v-else-if="item.item.title === '评分'" class="p-2">
              <el-rate v-model="item.item.value" :max="item.item.count" size="large" />
            </div>
            <div v-else-if="item.item.title === '表格'" class="p-2">
              <el-table :data="item.item.table" style="display:contents;">
                <el-table-column prop="th" />
                <el-table-column prop="td" />
              </el-table>
            </div>
            <div v-else-if="item.item.title === '自增表格'" class="p-2">
              <el-table :data="item.item.table" style="display:contents;">
                <el-table-column prop="th" />
                <el-table-column prop="td" />
              </el-table>
              <div style="text-align: center;">
                <el-button type="info" circle class="mt-4">
                  <el-icon>
                    <Plus />
                  </el-icon>
                </el-button>

              </div>
            </div>
            <div v-else-if="item.item.title === '检查项'" class="p-2 text-center" :style="item.css">
              <div v-for="(o, i) in item.item.list" :key="o" class="mt-4">
                <div class="float-left">
                  {{ o.title }}
                </div>
                <div class="float-right">
                  <el-row>
                    <el-col :span="12">
                      <el-icon>
                        <CircleClose />
                      </el-icon>
                    </el-col>
                    <el-col :span="12">
                      <el-icon>
                        <CircleCheck />
                      </el-icon>
                    </el-col>
                  </el-row>
                </div>
                <div style="clear: both;"></div>
              </div>
            </div>
            <div v-else-if="item.item.title === '手写签名'" class="p-2">
              <div class="border-1 mt-4 h-10 text-center">真实效果请在小程序查看</div>
            </div>
            <div v-else-if="item.item.title === 'NPS量表'" class="p-2 text-center" :style="item.css">
              <div style="clear: both;"></div>
              <div v-for="i in 11" :key="i" @click="item.item.value = i">
                <div class="float-left ml-1 border-1 p-1 px-1"
                  :class="(i - 1) < parseInt(item.item.value) ? 'bg-blue-500 text-white' : ''">
                  {{ i - 1 }}
                </div>
              </div>
              <div style="clear: both;"></div>
              <div class="pt-4">
                <div class="float-left mt-2">
                  {{ item.item.min }}
                </div>
                <div class="float-right mt-2">
                  {{ item.item.max }}
                </div>
                <div style="clear: both;"></div>
              </div>
              <div style="clear: both;"></div>
            </div>
            <div v-else-if="item.item.title === '定位'" class="p-2" style="clear: both;">
              <el-button @click="chooseLocationMP(index)">
                {{ item.item.value == null ? '获取当前位置' : item.item.value }}
              </el-button>
            </div>
            <div v-if="item.item.title === '姓名'" class="p-2" :style="item.css">
              <el-input v-model="item.item.value" placeholder="待填写" border="surround">
                <template #prefix>
                  <el-icon>
                    <User />
                  </el-icon>
                </template>
              </el-input>
            </div>
            <div v-if="item.item.title === '手机号'" class="p-2" :style="item.css">
              <div v-if="!item.item.show" class="h-10 border-1 text-center pt-2">
                点击授权
              </div>
              <div v-else class="h-10 border-1 text-center pt-2" :style="item.css">
                {{ item.item.value }}
              </div>
            </div>
            <div v-if="item.item.title === '身份证'" class="p-2" :style="item.css">
              <el-input v-model="item.item.value" placeholder="待填写" border="surround">
                <template #prefix>
                  <el-icon>
                    <Postcard />
                  </el-icon>
                </template>
              </el-input>
            </div>

            <div v-else-if="item.item.title === '性别'" class="p-2" :style="item.css">
              <el-radio-group v-model="item.item.value" placement="column">
                <el-radio v-for="o in item.item.radiolist" :key="o" :name="o.name" :label="o.name"
                  custom-style="padding:20rpx"></el-radio>
              </el-radio-group>
            </div>
            <div v-if="item.item.title === '年龄'" class="p-2" :style="item.css">
              <el-input v-model="item.item.value" placeholder="待填写" border="surround">
                <template #prefix>
                  <el-icon>
                    <HomeFilled />
                  </el-icon>
                </template>
              </el-input>
            </div>
            <div v-if="item.item.title === '工号'" class="p-2" :style="item.css">
              <el-input v-model="item.item.value" placeholder="待填写" border="surround">
                <template #prefix>
                  <el-icon>
                    <Files />
                  </el-icon>
                </template>
              </el-input>
            </div>
            <div v-else-if="item.item.title === '车牌'" class="p-2" :style="item.css">
              <el-input v-model="item.item.value" type="text" placeholder="请输入车牌号" border="surround" :disabled="true"
                disabled-color="#fff">
                <template #suffix>
                  <el-button :text="tips" type="warning" size="mini" @click="opencar(index)">
                    选取
                  </el-button>
                </template>
              </el-input>
              <!-- vehicleType  车牌号组件类型 默认挂车trailer  普通车牌号为car -->

            </div>
            <div v-else-if="item.item.title === '地址'" class="p-2" :style="item.css">
              <el-input v-model="item.item.city" type="text" placeholder="请选择地址" border="surround" :disabled="true"
                disabled-color="#fff">
                <template #suffix>
                  <el-button :text="tips" type="warning" size="mini" @click="opencar(index)">
                    选取
                  </el-button>
                </template>
              </el-input>
              <el-input v-model="item.item.address" type="textarea" rows="5" placeholder=""></el-input>
              <!-- vehicleType  车牌号组件类型 默认挂车trailer  普通车牌号为car -->

            </div>
            <div v-else-if="item.item.title === '上传图片'" class="p-2" style="clear: both;">
              <div style="width: 100px;height: 100px;margin: 0 auto"
                class="border text-center flex justify-center items-center" @click="chooseUpload('图片', index)">
                <!-- <uv-icon name="photo" color="#c4c6c9" size="28"></uv-icon> -->
                <el-icon size="28">
                  <PictureFilled />
                </el-icon>
              </div>

              <img v-show="item.item.value" :src="item.item.value" mode="widthFix" class="w-full aspect-16/9"
                style="margin: 0 auto;margin-top: 30rpx;" />
            </div>
            <div v-else-if="item.item.title === '上传视频'" class="p-2" style="clear: both;">
              <div style="width: 100px;height: 100px;margin: 0 auto"
                class="border text-center flex justify-center items-center" @click="chooseUpload('视频', index)">
                <!-- <uv-icon name="play-right" color="#c4c6c9" size="28"></uv-icon> -->
                <el-icon size="28">
                  <VideoCameraFilled />
                </el-icon>
              </div>

              <video v-show="item.item.value" :src="item.item.value" mode="widthFix" class="w-full aspect-16/9" controls
                style="width: auto;"></video>
            </div>

          </div>
          <!-- <div v-show="!backbtn && ercodedata.eqType == 1"
        class="flex w-full justify-center items-center text-center bottom-0">
        <uv-button type="primary" text="保存" custom-style="background-color:#fcca00;width:100%;" @click="svaeItem()">
          提交
        </uv-button>
      </div> -->
        </div>

        <div v-if="false">
          <div class="bg-white p-2">
            <div class="rounded-4"
              style="position: relative; width: 100%; height: 200px; background-position: center; background-size: cover;"
              :style="{ 'background-img': `url(${card.bg})` }">
              <div style="position: absolute;top:30px;right: 30px">
                <img :src="card.avatar" mode="scaleToFill" class="w-16 h-16 rounded-full" />
              </div>
              <div style="position: absolute;top:30px;left: 30px;font-weight: 800;" class="text-2xl">
                {{ card.name }}
              </div>
              <div style="position: absolute;top:70px;left: 30px" class="text-xl">
                {{ card.phone }}
              </div>
              <div style="position: absolute;bottom:20px;left: 30px" class="text-lg">
                {{ card.companyname }}
              </div>
              <div v-if="card.department" style="position: absolute;top:120px;left: 30px" class="text-sm">
                {{ card.department }} | {{ card.position }}
              </div>
            </div>

            <div class="mt-4">
              <uv-cell-group v-if="card">
                <uv-cell v-if="card.phone" @click="goPhoneBtn(card.phone)">
                  <!-- 自定义左侧标题 -->
                  <template #title>
                    <text>{{ card.phone }}</text>
                  </template>

                  <!-- 自定义左侧图标 -->
                  <template #icon>
                    <uv-icon size="50rpx" name="phone"></uv-icon>
                  </template>
                </uv-cell>
                <uv-cell v-if="card.weixin" @click="copyToClipboard(card.weixin)">
                  <!-- 自定义左侧标题 -->
                  <template #title>
                    <text>{{ card.weixin }}</text>
                  </template>

                  <!-- 自定义左侧图标 -->
                  <template #icon>
                    <uv-icon size="50rpx" name="weixin-fill"></uv-icon>
                  </template>
                </uv-cell>
                <uv-cell v-if="card.email" @click="copyToClipboard(card.email)">
                  <!-- 自定义左侧标题 -->
                  <template #title>
                    <text>{{ card.email }}</text>
                  </template>

                  <!-- 自定义左侧图标 -->
                  <template #icon>
                    <uv-icon size="50rpx" name="email"></uv-icon>
                  </template>
                </uv-cell>

                <uv-cell v-if="card.companyname" @click="copyToClipboard(card.companyname)">
                  <!-- 自定义左侧标题 -->
                  <template #title>
                    <text>{{ card.companyname }}</text>
                  </template>

                  <!-- 自定义左侧图标 -->
                  <template #icon>
                    <uv-icon size="50rpx" name="home"></uv-icon>
                  </template>
                </uv-cell>

                <uv-cell v-if="card.department" @click="copyToClipboard(`${card.department}-${card.position}`)">
                  <!-- 自定义左侧标题 -->
                  <template #title>
                    <text>{{ card.department }}-{{ card.position }}</text>
                  </template>

                  <!-- 自定义左侧图标 -->
                  <template #icon>
                    <uv-icon size="50rpx" name="order"></uv-icon>
                  </template>
                </uv-cell>

                <uv-cell v-if="card.address" @click="copyToClipboard(card.address)">
                  <!-- 自定义左侧标题 -->
                  <template #title>
                    <text>{{ card.address }}</text>
                  </template>

                  <!-- 自定义左侧图标 -->
                  <template #icon>
                    <uv-icon size="50rpx" name="map"></uv-icon>
                  </template>
                </uv-cell>
              </uv-cell-group>
              <div v-if="card && card.longitude && card.latitude" class="page-section page-section-gap">
                <map style="width: 100%; height: 300px;" :latitude="card.latitude" :longitude="card.longitude"
                  :markers="covers">
                </map>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <div class="bg-white p-2">
          <div class="rounded-4"
            style="position: relative; width: 100%; height: 200px; background-position: center; background-size: cover;"
            :style="{ 'background-image': `url(${list.card.bg})` }">
            <div style="position: absolute;top:30px;right: 30px">
              <img :src="list.card.avatar" mode="scaleToFill" class="w-16 h-16 rounded-full" />
            </div>
            <div style="position: absolute;top:30px;left: 30px;font-weight: 800;" class="text-2xl">
              {{ list.card.name }}
            </div>
            <div style="position: absolute;top:70px;left: 30px" class="text-xl">
              {{ list.card.phone }}
            </div>
            <div style="position: absolute;bottom:20px;left: 30px" class="text-lg">
              {{ list.card.companyname }}
            </div>
            <div v-if="list.card.department" style="position: absolute;top:120px;left: 30px" class="text-sm">
              {{ list.card.department }} | {{ list.card.position }}
            </div>
          </div>

          <div class="mt-4">
            <el-row>
              <el-col :span="4">
                <div style="margin: 0 auto;">
                  <el-icon>
                    <PhoneFilled />
                  </el-icon>
                </div>
              </el-col>
              <el-col :span="20">{{ list.card.phone }}</el-col>
            </el-row>
            <el-divider />
            <el-row>
              <el-col :span="4">
                <div style="margin: 0 auto;">
                  <el-icon>
                    <ChatDotRound />
                  </el-icon>
                </div>
              </el-col>
              <el-col :span="20">{{ list.card.weixin }}</el-col>
            </el-row>
            <el-divider />
            <el-row>
              <el-col :span="4">
                <div style="margin: 0 auto;">
                  <el-icon>
                    <Message />
                  </el-icon>
                </div>
              </el-col>
              <el-col :span="20">{{ list.card.email }}</el-col>
            </el-row>
            <el-divider />
            <el-row>
              <el-col :span="4">
                <div style="margin: 0 auto;">
                  <el-icon>
                    <House />
                  </el-icon>
                </div>
              </el-col>
              <el-col :span="20">{{ list.card.companyname }}</el-col>
            </el-row>
            <el-divider />
            <el-row>
              <el-col :span="4">
                <div style="margin: 0 auto;">
                  <el-icon>
                    <UserFilled />
                  </el-icon>
                </div>
              </el-col>
              <el-col :span="20">{{ list.card.department }}-{{ list.card.position }}</el-col>
            </el-row>
            <el-divider />
            <div class="page-section page-section-gap">
              <!-- <map style="width: 100%; height: 300px;" :latitude="card.latitude" :longitude="card.longitude"
              :markers="covers">
            </map> -->
              <div id="container"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else-if="mode === 'v2'">
      <div v-if="list" class="bg-white" style="padding-top: 10px">
        <div v-for="item in list" :key="item" class="float-left"
          :class="(item.key === '基础表单' || item.key === '多媒体类' || item.key === '个人信息') ? 'w-full' : item.grid"
          @click="callPhoneNumber(item.value)">
          <div v-if="item.key === '文本'" class="p-2  m-2" :class="item.center" :style="item.css">

            <!-- {{ item.value }} -->
            <div v-html="item.value"></div>
          </div>
          <div v-else-if="item.key === '图片'" class="" :style="item.css">
            <img :src="item.value" style="margin: 0 auto;margin-top: 15px;"
              :class="item.mode === 'aspectFill' ? 'aspect-fit' : 'width-fix'" />

          </div>
          <div v-else-if="item.key === '滚动'" class="p-2  m-2" :style="item.css">
            <div style="display:none;word-wrap: break-word">{{ item.value }}</div>
            <el-carousel :autoplay="false" track-by="img" height="80px" :key="new Date().getTime()">
              <el-carousel-item v-for="img in item.value" :key="img">

                <img :src="img" alt="" style="width:auto;height:80px;margin:0 auto" />
              </el-carousel-item>
            </el-carousel>
          </div>
          <div v-else-if="item.key === '视频'" class="p-2  m-2" :style="item.css">
            <video :src="item.value" mode="widthFix" class="w-full aspect-16/9" controls style="width: auto;"></video>
          </div>
          <div v-else-if="item.key === '音频'" class="p-2  m-2" :style="item.css">
            <audio :src="item.value" mode="widthFix" controls style="width: 100%;height: auto;margin: 0 auto;"></audio>
          </div>
          <div v-else-if="item.key === '标题'" class="p-2  m-2" :style="item.css">
            <div :class="`title  title${item.index}`" :data-text="item.value">
              {{ item.value }}
            </div>
          </div>
          <div v-else-if="item.key === '分割线'" class="p-2  m-2" :style="item.css">
            <hr :class="`${item.value}`" />
          </div>

          <div v-else-if="item.key === '文件'" class="p-2 border-2 m-2" style="height: 120px;" :style="item.css">

            <el-row custom-style="margin-bottom: 10px">
              <el-col span="4">
                <div class="p-4">
                  <img :src="getSettingbyKey('文档图标')" style="width:80px;height:80px;" mode="scaleToFill" />
                </div>
              </el-col>
              <el-col span="8">
                <div class="mt-4 w-30" style="word-break:break-all;word-wrap:break-word; "> {{ item.name }}</div>
                <div class="mt-4 font-100  text-left p-2 w-30 text-gray">
                  {{ item.size }}
                </div>
              </el-col>
            </el-row>
          </div>
          <div v-else-if="(item.key === '基础表单' || item.key === '多媒体类' || item.key === '个人信息')" class="name p-2 w-full">
            <div v-if="item.item.title !== '分组标题'" class="p-2">
              {{ item.item.name }} <text v-if="containsRequired(item.item.setting, '必填')" class="text-red">
                *
              </text>
            </div>
            <div v-if="item.item.instruction && item.item.title !== '分组标题'" class="p-2 text-sm text-gray-400"
              :style="item.css">
              {{ item.item.instruction }}
            </div>
            <div v-if="item.item.title === '单行文本'" class="p-2">
              <el-input v-model="item.item.value" placeholder="请输入内容" border></el-input>
            </div>
            <div v-else-if="item.item.title === '多行文本'" class="p-2">
              <!-- <uv-textarea v-model="item.item.value" placeholder="请输入内容"></uv-textarea> -->
              <el-input v-model="item.item.value" style="width: 260px" :rows="4" type="textarea" placeholder="请输入内容" />
            </div>
            <div v-else-if="item.item.title === '数字'" class="p-2">
              <!-- <uv-input v-model="item.item.value" type="number" placeholder="请输入数字" border="surround">
            <template v-if="item.item.unit" #suffix>
              <uv-button>
                {{ item.item.unit }}
              </uv-button>
            </template>
</uv-input> -->
              <el-input style="width: 260px;" placeholder="请输入数字">
                <template #append>
                  {{ item.item.unit }}
                </template>
              </el-input>
            </div>
            <div v-else-if="item.item.title === '日期'" class="p-2">
              <el-input v-model="item.item.value" style="width: 260px;border:0" placeholder="请选择日期" />
              <!-- <uv-input v-model="item.item.value" type="text" readonly placeholder="请选择日期" border="surround">
            <template #suffix>
              <uv-button :text="tips" type="warning" size="mini" @click="opencalendars(index)">
                选取
              </uv-button>
            </template>
          </uv-input>
          <uv-calendars :ref="`calendars${index}`" @confirm="confirmcalendars" /> -->
            </div>
            <div v-else-if="item.item.title === '时间'" class="p-2">
              <el-input v-model="item.item.value" style="width: 260px;border:0" placeholder="请选择时间" />
              <!-- <uv-input v-model="item.item.value" type="text" readonly placeholder="请选择时间" border="surround">
            <template #suffix>
              <uv-button :text="tips" type="warning" size="mini" @click="opendatetimePicker(index)">
                选取
              </uv-button>
            </template>
          </uv-input> -->
              <!-- <uv-datetime-picker :ref="`datetimePicker${index}`" v-model="value" mode="time"
            @confirm="confirmdatetimePicker">
          </uv-datetime-picker> -->
            </div>
            <div v-else-if="item.item.title === '分组标题'" class="p-2 text-center">
              <div class="text-left font-8 pb-2"
                style="font-size: 20px;font-weight: 800;border-bottom:2px #fcca00 solid">
                {{ item.item.name }}
              </div>
              <div class="text-left font-8">
                {{ item.item.instruction }}
              </div>
            </div>
            <div v-else-if="item.item.title === '单选项'" class="p-2" style="clear: both;">
              <div style="clear: both;"></div>
              <el-radio-group v-model="item.item.value">
                <view v-for="o in item.item.radiolist" :key="o">
                  <el-radio :name="o.name" :label="o.name" :value="o.isActive"></el-radio>
                </view>

              </el-radio-group>
            </div>
            <div v-else-if="item.item.title === '多选项'" class="p-2" style="clear: both;">
              <el-checkbox-group v-model="item.item.value" placement="column">
                <el-checkbox v-for="o in item.item.checkboxlist" :key="o" :name="o.name" :label="o.name"
                  :value="o.isActive"></el-checkbox>
              </el-checkbox-group>
            </div>
            <div v-else-if="item.item.title === '评分'" class="p-2">
              <el-rate v-model="item.item.value" :max="item.item.count" size="large" />
            </div>
            <div v-else-if="item.item.title === '表格'" class="p-2">
              <el-table :data="item.item.table" style="display:contents;">
                <el-table-column prop="th" width="100" />
                <el-table-column prop="td" width="200" />
              </el-table>
            </div>
            <div v-else-if="item.item.title === '自增表格'" class="p-2">
              <el-table :data="item.item.table" style="display:contents;">
                <el-table-column prop="th" width="100" />
                <el-table-column prop="td" width="200" />
              </el-table>
              <div style="text-align: center;">
                <el-button type="info" circle class="mt-4">
                  <el-icon>
                    <Plus />
                  </el-icon>
                </el-button>

              </div>
            </div>
            <div v-else-if="item.item.title === '检查项'" class="p-2 text-center" :style="item.css">
              <div v-for="(o, i) in item.item.list" :key="o" class="mt-4">
                <div class="float-left">
                  {{ o.title }}
                </div>
                <div class="float-right">
                  <el-row>
                    <el-col :span="12">
                      <el-icon>
                        <CircleClose />
                      </el-icon>
                    </el-col>
                    <el-col :span="12">
                      <el-icon>
                        <CircleCheck />
                      </el-icon>
                    </el-col>
                  </el-row>
                </div>
                <div style="clear: both;"></div>
              </div>
            </div>
            <div v-else-if="item.item.title === '手写签名'" class="p-2">
              <div class="border-1 mt-4 h-10 text-center">真实效果请在小程序查看</div>
            </div>
            <div v-else-if="item.item.title === 'NPS量表'" class="p-2 text-center" :style="item.css">
              <div style="clear: both;"></div>
              <div v-for="i in 11" :key="i" @click="item.item.value = i">
                <div class="float-left ml-1 border-1 p-1 px-1"
                  :class="(i - 1) < parseInt(item.item.value) ? 'bg-blue-500 text-white' : ''">
                  {{ i - 1 }}
                </div>
              </div>
              <div style="clear: both;"></div>
              <div class="pt-4">
                <div class="float-left mt-2">
                  {{ item.item.min }}
                </div>
                <div class="float-right mt-2">
                  {{ item.item.max }}
                </div>
                <div style="clear: both;"></div>
              </div>
              <div style="clear: both;"></div>
            </div>
            <div v-else-if="item.item.title === '定位'" class="p-2" style="clear: both;">
              <el-button @click="chooseLocationMP(index)">
                {{ item.item.value == null ? '获取当前位置' : item.item.value }}
              </el-button>
            </div>
            <div v-if="item.item.title === '姓名'" class="p-2" :style="item.css">
              <el-input v-model="item.item.value" placeholder="待填写" border="surround">
                <template #prefix>
                  <el-icon>
                    <User />
                  </el-icon>
                </template>
              </el-input>
            </div>
            <div v-if="item.item.title === '手机号'" class="p-2" :style="item.css">
              <div v-if="!item.item.show" class="h-10 border-1 text-center pt-2">
                点击授权
              </div>
              <div v-else class="h-10 border-1 text-center pt-2" :style="item.css">
                {{ item.item.value }}
              </div>
            </div>
            <div v-if="item.item.title === '身份证'" class="p-2" :style="item.css">
              <el-input v-model="item.item.value" placeholder="待填写" border="surround">
                <template #prefix>
                  <el-icon>
                    <Postcard />
                  </el-icon>
                </template>
              </el-input>
            </div>

            <div v-else-if="item.item.title === '性别'" class="p-2" :style="item.css">
              <el-radio-group v-model="item.item.value" placement="column">
                <el-radio v-for="o in item.item.radiolist" :key="o" :name="o.name" :label="o.name"
                  custom-style="padding:20rpx"></el-radio>
              </el-radio-group>
            </div>
            <div v-if="item.item.title === '年龄'" class="p-2" :style="item.css">
              <el-input v-model="item.item.value" placeholder="待填写" border="surround">
                <template #prefix>
                  <el-icon>
                    <HomeFilled />
                  </el-icon>
                </template>
              </el-input>
            </div>
            <div v-if="item.item.title === '工号'" class="p-2" :style="item.css">
              <el-input v-model="item.item.value" placeholder="待填写" border="surround">
                <template #prefix>
                  <el-icon>
                    <Files />
                  </el-icon>
                </template>
              </el-input>
            </div>
            <div v-else-if="item.item.title === '车牌'" class="p-2" :style="item.css">
              <el-input v-model="item.item.value" type="text" placeholder="请输入车牌号" border="surround" :disabled="true"
                disabled-color="#fff">
                <template #suffix>
                  <el-button :text="tips" type="warning" size="mini" @click="opencar(index)">
                    选取
                  </el-button>
                </template>
              </el-input>
              <!-- vehicleType  车牌号组件类型 默认挂车trailer  普通车牌号为car -->

            </div>
            <div v-else-if="item.item.title === '地址'" class="p-2" :style="item.css">
              <el-input v-model="item.item.city" type="text" placeholder="请选择地址" border="surround" :disabled="true"
                disabled-color="#fff">
                <template #suffix>
                  <el-button :text="tips" type="warning" size="mini" @click="opencar(index)">
                    选取
                  </el-button>
                </template>
              </el-input>
              <el-input v-model="item.item.address" type="textarea" rows="5" placeholder=""></el-input>
              <!-- vehicleType  车牌号组件类型 默认挂车trailer  普通车牌号为car -->

            </div>
            <div v-else-if="item.item.title === '上传图片'" class="p-2" style="clear: both;">
              <div style="width: 100px;height: 100px;margin: 0 auto"
                class="border text-center flex justify-center items-center" @click="chooseUpload('图片', index)">
                <!-- <uv-icon name="photo" color="#c4c6c9" size="28"></uv-icon> -->
                <el-icon size="28">
                  <PictureFilled />
                </el-icon>
              </div>

              <img v-show="item.item.value" :src="item.item.value" mode="widthFix" class="w-full aspect-16/9"
                style="margin: 0 auto;margin-top: 30rpx;" />
            </div>
            <div v-else-if="item.item.title === '上传视频'" class="p-2" style="clear: both;">
              <div style="width: 100px;height: 100px;margin: 0 auto"
                class="border text-center flex justify-center items-center" @click="chooseUpload('视频', index)">
                <!-- <uv-icon name="play-right" color="#c4c6c9" size="28"></uv-icon> -->
                <el-icon size="28">
                  <VideoCameraFilled />
                </el-icon>
              </div>

              <video v-show="item.item.value" :src="item.item.value" mode="widthFix" class="w-full aspect-16/9" controls
                style="width: auto;"></video>
            </div>
          </div>
        </div>
      </div>
      <div class="h-10"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps } from 'vue';
import { useListStore } from '@/stores/list';
import { getSettingbyKey, getSettingbyincludes } from '@/utils/index.js';
import { useRoute, useRouter } from 'vue-router';
const listStore = useListStore();
const props = defineProps({
  title: String
});
function containsRequired(arr, txt) {
  // console.log('arr', arr)
  // 先做一个简单的类型检查确保传入的是数组
  if (!Array.isArray(arr)) {
    throw new TypeError('传入的参数不是一个数组')
  }

  // 使用 includes 方法检查数组中是否含有 '必填'
  return arr.includes(txt)
}
//const { list } = listStore
const list = computed(() => listStore.list);
//const { list } = storeToRefs(listStore)
console.log('list', list.value)
const route = useRoute();
const t = route.query.t;
const mode = route.query.mode;
console.log('t', t)
//console.log("document.getElementById('container')", document.getElementById('container'))
const TMap = window.TMap
const state = ref({
  markerLayer: '',
  marker: null,
  infoWindow: null,
  value: 1,
})
const init = () => {
  console.log('我被调用了')
  const center = new TMap.LatLng(list.value.card.latitude, list.value.card.longitude)
  const map = new TMap.Map(document.getElementById('container'), {
    center: center, // 设置地图中心点坐标
    zoom: 14, // 设置地图缩放级别
    viewMode: '2D',
  })

  // 关闭信息窗关闭

  state.value.marker = null;
  state.value.marker = new TMap.MultiMarker({
    map: map,
    geometries: [{ position: new TMap.LatLng(list.value.card.latitude, list.value.card.longitude) }],
  })
}
onMounted(() => {
  if (t === '2') {
    init()
  }
})
if (t === '2') {
  // 侦听list数组中每个对象的card属性
  watch(
    () => list.value.card.latitude,
    (newList, oldList) => {
      // 检查每个对象的card属性中的longitude和latitude是否有变化
      init();


    },
    { deep: true } // 深度侦听，确保可以侦听嵌套对象的变化
  );
}

</script>



<style>
.top {
  z-index: 999;
  width: 100%;
  height: 60px;
  background: #fcca00;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
}

strong {
  font-weight: bold;

  /* 确保加粗样式生效 */
}

h1 {
  font-size: 2em !important;
  font-weight: bold !important;
}

h2 {
  font-size: 1.5em !important;
  font-weight: bold !important;
}

h3 {
  font-size: 1.17em !important;
  font-weight: bold !important;
}

h4 {
  font-size: 1em !important;
  font-weight: bold !important;
}

h5 {
  font-size: .83em !important;
  font-weight: bold !important;
}

h6 {
  font-size: .67em !important;
  font-weight: bold !important;
}

img {
  width: 100%;
  vertical-align: bottom;
}

.aspect-fit {
  width: 100%;
  height: 200px;
  object-fit: contain;
}

.width-fix {
  width: 100%;

  /* 设置图片宽度为容器的100% */
  height: auto;

  /* 高度自动调整，以保持宽高比 */
}

.img-full-width {
  width: 100%;

  /* 宽度占满容器 */
  aspect-ratio: 9 / 16;

  /* 设置宽高比为9:16 */
  object-fit: cover;

  /* 确保图片覆盖整个元素区域，可能会被裁剪 */
}

.img-fixed-height {
  width: auto;

  /* 最大宽度为600px */
  max-height: 300px;

  /* 高度自适应 */

  object-fit: cover;

  /* 设置宽高比为16:9 */

  /* 水平居中 */
}

.aspect-16-9 {
  /* 16:9 宽高比 */
  width: 100%;

  /* 使用 aspect-ratio 属性保持宽高比 */
  aspect-ratio: 16 / 9;
}

.aspect-9-16 {
  /* 9:16 宽高比 */
  width: 100%;

  /* 使用 aspect-ratio 属性保持宽高比 */
  aspect-ratio: 9 / 16;
}

::-webkit-scrollbar {
  width: 0;

}

::-webkit-scrollbar-track {
  background: #f5f5f5;
}

.el-divider--horizontal {
  margin: 8px 0 !important;

}

/* 特定元素的滚动条样式 */
.scrollable::-webkit-scrollbar {
  width: 1px;
}

.scrollable::-webkit-scrollbar-track {
  background: #eee;
}

.scrollable::-webkit-scrollbar-thumb {
  background-color: #888;
}
</style>
<style lang="scss" scoped>
:deep(.el-radio-group) {
  display: block;
}

:deep(.el-radio) {
  display: block;
}

:deep(.el-checkbox-group) {
  display: block;
}

:deep(.el-checkbox) {
  display: block;
}
</style>
